<template>
  <div class="v-page">
    <el-card>
      <div slot="header" class="page-card">
        <div class="page-title">
          <span>{{ title }}</span>
        </div>
        <div>
          <slot name="header" />
        </div>
      </div>
      <slot />
    </el-card>
  </div>

</template>

<script>
/**
 * 单页面组件
 */
export default {
  name: 'Page',
  props: {
    /** 卡片名称 */
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.v-page {
  /* 卡片头部样式 */
  ::v-deep .el-card__header {
    background-color: #f5f7fa;
    padding: 7px 15px;
  }

  /* 卡片内容区域样式 */
  ::v-deep .el-card__body {
    padding: 15px;
  }

  /* 页面卡片布局 */
  .page-card {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 默认子元素垂直居中 */

    /* 如果 page-title 需要特殊对齐方式，可以单独设置 */
    .page-title {
      display: flex;
      /* 例如：align-items: flex-start; */
    }
  }
}
</style>
